<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>

<style type="text/css">
	
</style>

</head>
<body>

<div class="bgsound">
    <span class="status"></span>
    <audio src="纯音乐-抽奖音乐.mp3" controls="controls" preload id="music" hidden></audio>
    <audio src="中国人民解放军军乐团+-+春节序曲.mp3" controls="controls" preload id="musictwo" hidden></audio>
    <span class="btn-play">
        <span class="music-symbol">♫</span>
        <span class="music-symbol">♫</span>
        <span class="music-symbol">♫</span>
    </span>
    <span class="btn-replay" onclick="replay();">重新播放</span>
    <button id="btstart">start</button>
    <button id="btreplay">replay</button>
    <button id="btchange">change</button>
</div>

<script>

/* 背景音乐控制 */

	$('#btstart').click(function(event) {
		/* Act on the event */
		var audio = document.getElementById('music'); 
		if(audio!==null){             
            if(audio.paused){                 
                audio.play(); 
            }else{
            	audio.pause();
            }
        }

	});

	$('#btreplay').click(function(event) {
		/* Act on the event */
		var audio = document.getElementById('music'); 
        audio.currentTime = 0;
        audio.play();
		
	});

	$('#btchange').click(function(event) {
		/* Act on the event */
		var audio = document.getElementById('music');
		var audiotwo = document.getElementById('musictwo'); 
		if(audio!== null && audio.paused){
			audio.play();
			audiotwo.pause();
		}else{
			audio.pause();
			audiotwo.play();
		}

	});
    
    // 重新从头开始播放
    function replay(){
        var audio = document.getElementById('music'); 
        audio.currentTime = 0;
    }

    var musicSymbol = $('.music-symbol');

    // 播放/暂停
    /*$('.btn-play').click(function(e) {
        var audio = document.getElementById('music'); 

        // 检测播放是否已暂停
        if(audio!==null){             
            if(audio.paused){                 
                audio.play(); 
                
                $(this).append(musicSymbol);

                $('.bgsound .status').text('播放').fadeIn();  

                setTimeout(function() {
                    $('.bgsound .status').text('播放').fadeOut();  
                    $('.music-symbol').fadeIn();

                    // 显示符号
                    setInterval(function() {
                        $('.music-symbol').each(function() {
                            $(this).animate(
                                {
                                    'left': Math.random()*44, 
                                    'bottom': Math.random()*44
                                }, 
                                800
                            );
                        });
                    }, 0);

                }, 1000);
                
            }else{
                audio.pause();

                $('.music-symbol').remove();

                $('.bgsound .status').text('暂停').fadeIn();  
                setTimeout(function() {
                    $('.bgsound .status').text('暂停').fadeOut();  
                }, 1000);
                
            }
        } 
    });*/
   
</script>

</body>

</html>